Implementácia zabezpečenia medzi doménami: Osvedčené postupy pre komunikáciu v JavaScripte

V dnešnom prepojenom svete webu musia JavaScriptové aplikácie často interagovať so zdrojmi z rôznych pôvodov (domén, protokolov alebo portov). Túto interakciu riadi Same-Origin Policy prehliadača, kľúčový bezpečnostný mechanizmus navrhnutý tak, aby zabránil škodlivým skriptom v prístupe k citlivým údajom cez hranice domén. Legitimná komunikácia medzi rôznymi doménami je však často nevyhnutná. A práve tu prichádza na rad Cross-Origin Resource Sharing (CORS). Tento článok poskytuje komplexný prehľad CORS, jeho implementácie a osvedčených postupov pre bezpečnú komunikáciu medzi doménami v JavaScripte.

Pochopenie Same-Origin Policy

Same-Origin Policy (SOP) je základným bezpečnostným konceptom vo webových prehliadačoch. Obmedzuje skripty bežiace na jednom pôvode v prístupe k zdrojom z iného pôvodu. Pôvod je definovaný kombináciou protokolu (napr. HTTP alebo HTTPS), názvu domény (napr. example.com) a čísla portu (napr. 80 alebo 443). Dve URL adresy majú rovnaký pôvod, iba ak sa všetky tri zložky presne zhodujú.

Napríklad:

• http://www.example.com a http://www.example.com/path: Rovnaký pôvod
• http://www.example.com a https://www.example.com: Iný pôvod (iný protokol)
• http://www.example.com a http://subdomain.example.com: Iný pôvod (iná doména)
• http://www.example.com:80 a http://www.example.com:8080: Iný pôvod (iný port)

SOP je kritickou obranou proti útokom Cross-Site Scripting (XSS), pri ktorých môžu škodlivé skripty vložené do webovej stránky kradnúť používateľské údaje alebo vykonávať neoprávnené akcie v mene používateľa.

Čo je Cross-Origin Resource Sharing (CORS)?

CORS je mechanizmus, ktorý používa HTTP hlavičky, aby serverom umožnil určiť, ktoré pôvody (domény, schémy alebo porty) majú povolený prístup k ich zdrojom. V podstate uvoľňuje Same-Origin Policy pre špecifické požiadavky z iných pôvodov, čím umožňuje legitímnu komunikáciu a zároveň chráni pred škodlivými útokmi.

CORS funguje pridaním nových HTTP hlavičiek, ktoré špecifikujú povolené pôvody a metódy (napr. GET, POST, PUT, DELETE), ktoré sú povolené pre požiadavky z iných pôvodov. Keď prehliadač vykoná požiadavku z iného pôvodu, odošle hlavičku Origin spolu s požiadavkou. Server odpovie hlavičkou Access-Control-Allow-Origin, ktorá špecifikuje povolené pôvody. Ak sa pôvod požiadavky zhoduje s hodnotou v hlavičke Access-Control-Allow-Origin (alebo ak je hodnota *), prehliadač povolí JavaScriptovému kódu prístup k odpovedi.

Ako funguje CORS: Podrobné vysvetlenie

Proces CORS zvyčajne zahŕňa dva typy požiadaviek:

1. Jednoduché požiadavky (Simple Requests): Sú to požiadavky, ktoré spĺňajú špecifické kritériá. Ak požiadavka spĺňa tieto podmienky, prehliadač ju odošle priamo.
2. Preflight požiadavky (Preflighted Requests): Sú to zložitejšie požiadavky, ktoré vyžadujú, aby prehliadač najprv odoslal serveru „preflight“ požiadavku OPTIONS, aby zistil, či je bezpečné odoslať skutočnú požiadavku.

1. Jednoduché požiadavky

Požiadavka sa považuje za „jednoduchú“, ak spĺňa všetky nasledujúce podmienky:

• Metóda je GET, HEAD alebo POST.
• Ak je metóda POST, hlavička Content-Type je jedna z nasledujúcich:
• application/x-www-form-urlencoded
• multipart/form-data
• text/plain
• Nie sú nastavené žiadne vlastné hlavičky.

Príklad jednoduchej požiadavky:

GET /resource HTTP/1.1
Origin: http://www.example.com

Príklad odpovede servera, ktorá povoľuje daný pôvod:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://www.example.com
Content-Type: application/json

{
  "data": "Some data"
}

Ak je hlavička Access-Control-Allow-Origin prítomná a jej hodnota sa zhoduje s pôvodom požiadavky alebo je nastavená na *, prehliadač povolí skriptu prístup k údajom v odpovedi. V opačnom prípade prehliadač zablokuje prístup k odpovedi a v konzole sa zobrazí chybové hlásenie.

2. Preflight požiadavky

Požiadavka sa považuje za „preflighted“, ak nespĺňa kritériá pre jednoduchú požiadavku. Toto sa zvyčajne stáva, keď požiadavka používa inú HTTP metódu (napr. PUT, DELETE), nastavuje vlastné hlavičky alebo používa Content-Type iný ako povolené hodnoty.

Pred odoslaním skutočnej požiadavky prehliadač najprv odošle serveru požiadavku OPTIONS. Táto „preflight“ požiadavka obsahuje nasledujúce hlavičky:

• Origin: Pôvod stránky, ktorá požiadavku odosiela.
• Access-Control-Request-Method: HTTP metóda, ktorá sa použije v skutočnej požiadavke (napr. PUT, DELETE).
• Access-Control-Request-Headers: Zoznam vlastných hlavičiek oddelených čiarkou, ktoré sa odošlú v skutočnej požiadavke.

Príklad preflight požiadavky:

OPTIONS /resource HTTP/1.1
Origin: http://www.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header, Content-Type

Server musí na požiadavku OPTIONS odpovedať nasledujúcimi hlavičkami:

• Access-Control-Allow-Origin: Pôvod, ktorý má povolenie vykonať požiadavku (alebo * pre povolenie akéhokoľvek pôvodu).
• Access-Control-Allow-Methods: Zoznam HTTP metód oddelených čiarkou, ktoré sú povolené pre požiadavky z iných pôvodov (napr. GET, POST, PUT, DELETE).
• Access-Control-Allow-Headers: Zoznam vlastných hlavičiek oddelených čiarkou, ktoré sú povolené na odoslanie v požiadavke.
• Access-Control-Max-Age: Počet sekúnd, počas ktorých môže byť preflight odpoveď uložená v cache prehliadača.

Príklad odpovede servera na preflight požiadavku:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 86400

Ak odpoveď servera na preflight požiadavku naznačuje, že skutočná požiadavka je povolená, prehliadač potom odošle skutočnú požiadavku. V opačnom prípade prehliadač požiadavku zablokuje a zobrazí chybové hlásenie.

Implementácia CORS na strane servera

CORS sa primárne implementuje na strane servera nastavením príslušných HTTP hlavičiek v odpovedi. Konkrétne detaily implementácie sa budú líšiť v závislosti od použitej technológie na strane servera.

Príklad použitia Node.js s Express:

const express = require('express');
const cors = require('cors');
const app = express();

// Povoliť CORS pre všetky pôvody
app.use(cors());

// Alternatívne, konfigurovať CORS pre špecifické pôvody
// const corsOptions = {
//   origin: 'http://www.example.com'
// };
// app.use(cors(corsOptions));

app.get('/resource', (req, res) => {
  res.json({ message: 'This is a CORS-enabled resource' });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Middleware cors zjednodušuje proces nastavenia CORS hlavičiek v Expresse. Môžete povoliť CORS pre všetky pôvody pomocou cors() alebo ho nakonfigurovať pre špecifické pôvody pomocou cors(corsOptions).

Príklad použitia Pythonu s Flask:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/resource")
def hello():
    return {"message": "This is a CORS-enabled resource"}

if __name__ == '__main__':
    app.run(debug=True)

Rozšírenie flask_cors poskytuje jednoduchý spôsob, ako povoliť CORS vo Flask aplikáciách. Môžete povoliť CORS pre všetky pôvody odovzdaním app do CORS(). Možná je aj konfigurácia pre špecifické pôvody.

Príklad použitia Javy so Spring Boot:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/resource")
                .allowedOrigins("http://www.example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Content-Type", "X-Custom-Header")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

V Spring Boote môžete nakonfigurovať CORS pomocou WebMvcConfigurer. Toto umožňuje jemnozrnnú kontrolu nad povolenými pôvodmi, metódami, hlavičkami a ďalšími nastaveniami CORS.

Nastavenie CORS hlavičiek priamo (Všeobecný príklad)

Ak nepoužívate žiadny framework, môžete nastaviť hlavičky priamo vo svojom kóde na strane servera (napr. PHP, Ruby on Rails, atď.):

Osvedčené postupy pre CORS

Pre zaistenie bezpečnej a efektívnej komunikácie medzi doménami dodržiavajte tieto osvedčené postupy:

1. Vyhnite sa používaniu Access-Control-Allow-Origin: * v produkčnom prostredí: Povolenie prístupu k vašim zdrojom všetkým pôvodom môže predstavovať bezpečnostné riziko. Namiesto toho špecifikujte presné povolené pôvody.
2. Používajte HTTPS: Vždy používajte HTTPS pre pôvody odosielajúce požiadavku aj pre tie, ktoré ju prijímajú, aby ste ochránili dáta počas prenosu.
3. Validujte vstup: Vždy validujte a sanitizujte dáta prijaté z požiadaviek z iných pôvodov, aby ste predišli útokom typu injection.
4. Implementujte riadnu autentifikáciu a autorizáciu: Zabezpečte, aby mali prístup k citlivým zdrojom iba oprávnení používatelia.
5. Ukladajte preflight odpovede do vyrovnávacej pamäte: Použite Access-Control-Max-Age na ukladanie preflight odpovedí do cache a znížte počet OPTIONS požiadaviek.
6. Zvážte použitie prihlasovacích údajov (credentials): Ak vaše API vyžaduje autentifikáciu pomocou cookies alebo HTTP autentifikácie, musíte nastaviť hlavičku Access-Control-Allow-Credentials na true na serveri a možnosť credentials na 'include' vo vašom JavaScriptovom kóde (napr. pri použití fetch alebo XMLHttpRequest). Pri používaní tejto možnosti buďte mimoriadne opatrní, pretože môže zaviesť bezpečnostné zraniteľnosti, ak nie je správne spracovaná. Taktiež, keď je Access-Control-Allow-Credentials nastavené na true, Access-Control-Allow-Origin nemôže byť nastavené na „*“. Musíte explicitne špecifikovať povolené pôvody.
7. Pravidelne kontrolujte a aktualizujte konfiguráciu CORS: Ako sa vaša aplikácia vyvíja, pravidelne kontrolujte a aktualizujte svoju konfiguráciu CORS, aby ste zaistili, že zostane bezpečná a spĺňa vaše potreby.
8. Pochopte dôsledky rôznych konfigurácií CORS: Buďte si vedomí bezpečnostných dôsledkov rôznych konfigurácií CORS a zvoľte konfiguráciu, ktorá je vhodná pre vašu aplikáciu.
9. Testujte svoju implementáciu CORS: Dôkladne otestujte svoju implementáciu CORS, aby ste sa uistili, že funguje podľa očakávaní a že nezavádza žiadne bezpečnostné zraniteľnosti. Používajte vývojárske nástroje prehliadača na kontrolu sieťových požiadaviek a odpovedí a používajte automatizované testovacie nástroje na overenie správania CORS.

Príklad: Použitie Fetch API s CORS

Tu je príklad, ako použiť fetch API na uskutočnenie požiadavky z iného pôvodu:

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors', // Hovorí prehliadaču, že ide o CORS požiadavku
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('There was a problem with the fetch operation:', error);
});

Možnosť mode: 'cors' hovorí prehliadaču, že ide o CORS požiadavku. Ak server nepovolí daný pôvod, prehliadač zablokuje prístup k odpovedi a vyvolá sa chyba.

Ak používate prihlasovacie údaje (napr. cookies), musíte nastaviť možnosť credentials na 'include':

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors',
  credentials: 'include', // Zahrnúť cookies do požiadavky
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  // ...
});

CORS a JSONP

JSON with Padding (JSONP) je staršia technika na obchádzanie Same-Origin Policy. Funguje tak, že dynamicky vytvára značku <script>, ktorá načíta dáta z inej domény. Hoci JSONP môže byť v určitých situáciách užitočný, má značné bezpečnostné obmedzenia a malo by sa mu vyhýbať, ak je to možné. CORS je preferovaným riešením pre komunikáciu medzi doménami, pretože poskytuje bezpečnejší a flexibilnejší mechanizmus.

Kľúčové rozdiely medzi CORS a JSONP:

• Bezpečnosť: CORS je bezpečnejší ako JSONP, pretože umožňuje serveru kontrolovať, ktoré pôvody majú povolený prístup k jeho zdrojom. JSONP neposkytuje žiadnu kontrolu pôvodu.
• HTTP metódy: CORS podporuje všetky HTTP metódy (napr. GET, POST, PUT, DELETE), zatiaľ čo JSONP podporuje iba GET požiadavky.
• Spracovanie chýb: CORS poskytuje lepšie spracovanie chýb ako JSONP. Keď zlyhá CORS požiadavka, prehliadač poskytne podrobné chybové hlásenia. Spracovanie chýb v JSONP je obmedzené na detekciu, či sa skript úspešne načítal.

Riešenie problémov s CORS

Problémy s CORS môžu byť frustrujúce pri ladení. Tu je niekoľko bežných tipov na riešenie problémov:

• Skontrolujte konzolu prehliadača: Konzola prehliadača zvyčajne poskytne podrobné chybové hlásenia o problémoch s CORS.
• Skontrolujte sieťové požiadavky: Použite vývojárske nástroje prehliadača na kontrolu HTTP hlavičiek požiadavky aj odpovede. Overte, či sú hlavičky Origin a Access-Control-Allow-Origin nastavené správne.
• Overte konfiguráciu na strane servera: Dvakrát skontrolujte svoju konfiguráciu CORS na strane servera, aby ste sa uistili, že povoľuje správne pôvody, metódy a hlavičky.
• Vymažte cache prehliadača: Niekedy môžu preflight odpovede uložené v cache spôsobiť problémy s CORS. Skúste vymazať cache prehliadača alebo použiť súkromné okno prehliadania.
• Použite CORS proxy: V niektorých prípadoch môže byť potrebné použiť CORS proxy na obídenie obmedzení CORS. Buďte si však vedomí, že použitie CORS proxy môže priniesť bezpečnostné riziká.
• Skontrolujte nesprávne konfigurácie: Hľadajte bežné nesprávne konfigurácie, ako je chýbajúca hlavička Access-Control-Allow-Origin, nesprávne hodnoty Access-Control-Allow-Methods alebo Access-Control-Allow-Headers, alebo nesprávna hlavička Origin v požiadavke.

Záver

Cross-Origin Resource Sharing (CORS) je základným mechanizmom na umožnenie bezpečnej komunikácie medzi doménami v JavaScriptových aplikáciách. Pochopením Same-Origin Policy, pracovného postupu CORS a rôznych zúčastnených HTTP hlavičiek môžu vývojári efektívne implementovať CORS na ochranu svojich aplikácií pred bezpečnostnými zraniteľnosťami a zároveň umožniť legitímne požiadavky z iných pôvodov. Dodržiavanie osvedčených postupov pre konfiguráciu CORS a pravidelná kontrola vašej implementácie sú kľúčové pre udržanie bezpečnej a robustnej webovej aplikácie.

Tento komplexný sprievodca poskytuje solídny základ pre pochopenie a implementáciu CORS. Nezabudnite sa obrátiť na oficiálnu dokumentáciu a zdroje pre vašu špecifickú technológiu na strane servera, aby ste sa uistili, že implementujete CORS správne a bezpečne.

Ďalšie zdroje

• MDN Web Docs: Cross-Origin Resource Sharing (CORS)
• W3C: Cross-Origin Resource Sharing (CORS)
• PortSwigger Web Security Academy: CORS